<template>
	<scroll-view scroll-y class="container" :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
		<view class="fill-report" :class="isShowTab ? 'mar-t' : ''">
			<view class="form">
				<view @click="jumpPageByType(1)" class="form-item">
					<view class="label required">项目名称</view>
					<view class="form-content">
						<view class="form-text">{{fillForm.project ? fillForm.project.name : ""}}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view @click="jumpPageByType(2)" class="form-item">
					<view class="label required">区间/站点</view>
					<view class="form-content">
						<view class="form-text">
							{{fillForm.intervalSite.length ? fillForm.intervalSite.map(item => item.lineSiteSectionName).join(",") : ""}}
						</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view @click="jumpPageByType(3)" class="form-item">
					<view class="label required">监控室值班人</view>
					<view class="form-content">
						<view class="form-text">
							{{fillForm.watchmanUserName.name || ''}}
						</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view @click="jumpPageByType(4)" class="form-item">
					<view class="label required">现场带班负责人</view>
					<view class="form-content">
						<view class="form-text">
							{{fillForm.onSiteShiftLeaderName.map(item => item.name).join("、")}}
						</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view class="form-item">
					<view class="label required" style="width: 260rpx;">劳务人员</view>
					<view class="form-content">
						<u--input inputAlign="right" v-model="fillForm.labour" type="number" placeholder="请输入数量"
							border="none" />人
					</view>
				</view>

				<view @click="jumpPageByType(5)" class="form-item">
					<view class="label required">特殊工种作业人员</view>
					<view class="form-content">
						<view class="form-text">
							{{fillForm.personnelCalls.length ? fillForm.personnelCalls.map(item => item.name).join("、") : "无"}}
						</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view class="form-item">
					<view class="label required">施工开始时间</view>
					<view @click="buildStartDatePicker = true" class="form-content">
						<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionStartTime}}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>
				<u-datetime-picker @confirm="confirmBuildStartDate" @cancel="buildStartDatePicker = false" v-model="timeVal"
					:show="buildStartDatePicker" :formatter="dateFormatter" :minDate="(new Date()).getTime()" mode="datetime" />
				<view class="form-item">
					<view class="label required">施工结束时间</view>
					<view @click="buildEndDatePicker = true" class="form-content">
						<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionEndTime}}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>
				<view class="" v-if="fillForm.projectType == 0">
					<view  class="form-item" @click="openGF">
						<view class="label required">施工工法</view>
						<view class="form-content">
							<view class="form-text">
								{{ getName(construction_method) }}
							</view>
							<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
						</view>
					</view>
					<view v-if="['snwrd', 'swwrd'].includes(construction_method)">
						<view  class="form-item" style="border-bottom: none;">
							<view class="label required">施工孔号及隧道环号</view>
							<view class="form-content">
								<view class="form-button" @click="addData">新增</view>
								
							</view>
						</view>
						<view class="uni-container" style="padding-bottom: 20rpx;">
							<uni-table ref="table"  stripe emptyText="暂无数据" width="200">
								<uni-tr>
									<uni-th align="center" width="120">施工孔号</uni-th>
									<uni-th align="center" width="120">隧道环号</uni-th>
									<uni-th align="center">操作</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in plannedConstructionWorkloads" :key="index">
									<uni-td align="center">
										<view class="" @click="openShow(1, index)">
											<view class="">{{ item.name ? item.name : '请选择'}}</view>
										</view>
									</uni-td>
									<uni-td align="center">
										<view class="" @click="openShow(2, index)">
											<view class="">{{ item.tunnelRingNumber ? item.tunnelRingNumber : '请选择'}}</view>
										</view>
									</uni-td>
									<uni-td align="center">
										<view @click="delItem(index)" style="color: #ff6a6a;">删除</view>
									</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
				<u-datetime-picker @confirm="confirmBuildEndDate" @cancel="buildEndDatePicker = false" v-model="timeVal"
					:show="buildEndDatePicker" :formatter="dateFormatter" :minDate="(new Date()).getTime()" mode="datetime" />
			</view>
			<u-picker :immediateChange="true" :show="show" :columns="list" keyName="name" @cancel="show = false"  @confirm="(data) => selectAction(data, 1)"></u-picker>
			<u-picker :immediateChange="true" :show="show2" :columns="list2" keyName="name" @cancel="show2 = false" @confirm="(data) => selectAction(data, 2)"></u-picker>
			<u-picker :immediateChange="true" :show="showGF" :columns="columns" keyName="constructionMethodName" @cancel="showGF = false" @confirm="confirmGF"></u-picker>
			<view class="footer-button">
				<view class="button-placeholder"></view>
				<view class="button-group">
					<button @click="clickSubmit" :loading="isLoading" class="button-primary">提交</button>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {mapGetters} from "vuex";
	import { pmPlanWorkloadList } from "@/api/comprehensive/comprehensive.js"
	import {getSystemHeightInfo,isPositiveInteger,imgFun,getFormCheckResult} from "@/utils/common.js";
	import {handleFormatDate,compareDate} from "@/utils/date.js";
	import fileMixin from "@/mixins/file.js";
	import mixins from "@/utils/mixins.js"
	import {constructionPlan_save, planRingNumber_selectByPlanWorkloadId} from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	import {getPermission} from "@/utils/common.js"
	export default {
		name: "fill-report",
		mixins: [fileMixin,mixins],
		props: {
			// 当前页面的类型 - 0: 综合大修下的  1: 工程维保下的
			type: {
				type: Number,
				default: 0,
			},
			isShowTab: {
				type: Number,
				default: 0,
			},
			editInfo: {
				type:Object,
				default:() => ({})
			}
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				timeVal:Number(new Date()),
				// 填报表单
				fillForm: {
					id:undefined,
					project: null,
					intervalSite: [],
					watchmanUserName: {},
					onSiteShiftLeaderName: [],
					labour: '',
					personnelCalls: [],
					constructionStartTime: '',
					constructionEndTime: '',
					projectType: undefined,

				},
				// 施工结束时间日期弹框显示状态
				buildStartDatePicker: false,
				buildEndDatePicker: false,
				// 是否在加载中
				isLoading: false,
				location: undefined,
				showGF:false, //施工功法
				columns:[[]],
				list:[],
				list2:[],
				show:false,
				show2:false,
				plannedConstructionWorkloads:[],
				construction_method:''
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		watch: {},
		mounted() {
			this.initContainerData();
			if(Object.keys(this.editInfo).length) {
				console.log(this.editInfo,'mounted')
				let temp = this.editInfo
				this.fillForm.id = temp.id
				this.fillForm.projectType = temp.code === 'zhdx' ? 0 : 1
				this.fillForm.project = {name:temp.pmName,id:temp.projectManagementId}
				if(temp.code === 'zhdx') {
					this.fillForm.project.orgId = temp.pmOrgId
				}else {
					this.fillForm.project.unitId = temp.pmOrgId
				}
				this.fillForm.intervalSite = temp.planConstructionSiteSectionList.map(it => ({
					...it,
					id:String(it.lineSiteSectionId),
					lineSiteSectionId:String(it.lineSiteSectionId),
					name:it.lineSiteSectionName
				}))
				this.fillForm.watchmanUserName = {
					id:temp.watchmanId,
					name:this.getPreName(temp.watchmanUserName),
					phone:this.extractPhoneNumber(temp.watchmanUserName)
				}
				this.fillForm.onSiteShiftLeaderName = temp.personnelCallList.filter(it => it.relationType === 'xcdb').map(k => ({
					...k,
					id:k.personId,
					name:this.getPreName(k.personName),
					phone:this.extractPhoneNumber(k.personName)
				}))
				this.fillForm.labour = temp.labour
				this.fillForm.personnelCalls = temp.personnelCallList.filter(it => it.relationType === 'tsgz').map(k => ({
					...k,
					id:k.personId,
					name:this.getPreName(k.personName)
				}))
				this.fillForm.constructionStartTime = handleFormatDate(temp.constructionStartTime, 3)
				this.fillForm.constructionEndTime = handleFormatDate(temp.constructionEndTime, 3)
				if(['zhdx'].includes(temp.code)) {
					this.plannedConstructionWorkloads = temp.plannedConstructionWorkloads.map(it => ({name:it.name, tunnelRingNumber:it.tunnelRingNumber}))
					this.construction_method = this.fillForm.intervalSite[0].constructionMethod
					this.getGFList(temp.planConstructionSiteSectionList[0])
					if(temp.planConstructionSiteSectionList.length && temp.planConstructionSiteSectionList[0].pmPlanWorkloadId) {
						this.getNumberList(temp.planConstructionSiteSectionList[0].pmPlanWorkloadId)
					}
				}
			}
		},
		methods: {
			openGF() {
				if(!this.fillForm.intervalSite.length) return this.$message('请先选择区间站点!')
				this.showGF = true
			},
			confirmGF(val) {
				console.log(val)
				this.construction_method = val.value[0].constructionMethod
				this.getNumberList(val.value[0].id)
				this.plannedConstructionWorkloads = []
				this.showGF = false
			},
			getName(code) {
				const arr = this.$store.getters.dictMap['construction_method'] || []
				let name = ''
				if (arr && arr.length > 0) {
					name = arr.find(it => it.code === code) ? arr.find(it => it.code === code).name : ''
				}
				return name
			},
			getNumberList(id) {
				planRingNumber_selectByPlanWorkloadId({
					pmPlanWorkloadId: id,
					businessType: "zhdx",
					code: "hh",
					projectId:null
				}).then(res => {
					this.list2 = [res.result.map(it => ({...it, name:it.ringNumber}))]
				})
				planRingNumber_selectByPlanWorkloadId({
					pmPlanWorkloadId: id,
					businessType: "zhdx",
					code: "kh",
					projectId:null
				}).then(res => {
					this.list = [res.result.map(it => ({...it, name:it.ringNumber}))]
				})
			},
			openShow(num, index) {
				console.log(num, '点击')
				this.recordIndex = index
				if(num === 1) {
					this.show = true
				}else {
					this.show2 = true
				}
				
			},
			selectAction(data, type) {
				if (data && data.indexs.length && data.value.length) {
					const index = data.indexs[0]
					const name = data.value[0].name
					if(type === 1) {
						this.plannedConstructionWorkloads[this.recordIndex].name = name
						this.show = false
					}else {
						this.plannedConstructionWorkloads[this.recordIndex].tunnelRingNumber = name
						this.show2 = false
					}
				}
			},
			addData() {
				// console.log(this.fillForm, '9999999999')
				if(!this.construction_method) return this.$message('请先选择施工工法')
				this.plannedConstructionWorkloads.push({ name: '', tunnelRingNumber: '' })
			},
			delItem(index) {
				this.plannedConstructionWorkloads.splice(index, 1);
			},
			getPreName(str) {
				return str.replace(/\([^)]*\)/g, '');
			},
			extractPhoneNumber(nameWithPhone) {
			  // 正则表达式，匹配括号中的数字
			  const regex = /\((\d+)\)/;
			  // 使用match方法找到匹配项
			  const match = nameWithPhone.match(regex);
			  // 如果找到匹配项，返回括号中的数字（即电话号码）
			  return match ? match[1] : "";
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 70;
			},

			/** 其他页面选择完后回显数据 */
			showDataByOtherPage() {
				if (uni.getStorageSync("_temp_select_project_safe")) {
					this.fillForm.project = uni.getStorageSync("_temp_select_project_safe");
					this.fillForm.projectType = uni.getStorageSync("_temp_select_project_name");
					uni.removeStorageSync("_temp_select_project_safe");
					uni.removeStorageSync("_temp_select_project_name");
					this.fillForm.intervalSite = [];
					this.fillForm.personnelCalls = [];
					this.fillForm.watchmanUserName = {}
					this.fillForm.onSiteShiftLeaderName = []
					this.construction_method = ''
				}
				if (uni.getStorageSync("_temp_select_interval_or_site")) {
					this.fillForm.intervalSite = uni.getStorageSync("_temp_select_interval_or_site");
					this.construction_method = ''
					console.log(this.fillForm.intervalSite, '666')
					if(this.fillForm.projectType == 0) {
						this.getGFList(this.fillForm.intervalSite[0])
					}
					uni.removeStorageSync("_temp_select_interval_or_site");
				}
				if (uni.getStorageSync("_temp_select_supervisor")) {
					this.fillForm.watchmanUserName = uni.getStorageSync("_temp_select_supervisor");
					// console.log(this.fillForm.watchmanUserName, '999')
					uni.removeStorageSync("_temp_select_supervisor");
				}
				if (uni.getStorageSync("_temp_select_onSiteShiftLeaderName")) {
					this.fillForm.onSiteShiftLeaderName = uni.getStorageSync("_temp_select_onSiteShiftLeaderName");
					uni.removeStorageSync("_temp_select_onSiteShiftLeaderName");
				}
				if (uni.getStorageSync("_temp_select_special_work_personnel") || uni.getStorageSync(
						"_temp_select_special_work_personnel") === null) {
					this.fillForm.personnelCalls = uni.getStorageSync("_temp_select_special_work_personnel");
					uni.removeStorageSync("_temp_select_special_work_personnel");
				}
			},
			//  获取施工工法列表
			getGFList(obj) {
				let resq = {
					params: {
						pmId: this.fillForm.project.id, //项目id
						lineSiteSectionType: obj.lineSiteSectionType, //站点区间类型(字典表-line_site_section_type)
						lineSiteSectionId: obj.lineSiteSectionId, //站点或区间id
					},
					currPage: 1,
					pageSize: 9999,
					projectId:null
				}
				pmPlanWorkloadList(resq).then(res => {
					console.log(res, 'list接口')
					if(res.result.list.length === 1) {
					const arr = res.result.list.map(it => ({...it, constructionMethodName: this.getName(it.constructionMethod)}))
					   this.construction_method  = arr[0].constructionMethod
					   this.getNumberList(arr[0].id)
					}
					this.columns = [res.result.list.map(it => ({...it, constructionMethodName: this.getName(it.constructionMethod)}))]
					
				})
			},
			/**
			 * 跳转页面
			 * 1: 点击选择项目名称  2: 点击选择区间站点  3: 点击选择安全监管人员  4: 点击选择特殊工种作业人员
			 * */
			jumpPageByType(type) {
				if (type === 1) {
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/select/select-project?type=${this.type}`
					});
				} else if (type === 2) {
					if (!this.fillForm.project) {
						uni.showToast({
							title: "请选择项目",
							icon: "none"
						});
						return;
					}
					if (this.fillForm.intervalSite) {
						uni.setStorageSync("_temp_select_interval_or_site", this.fillForm.intervalSite);
					}
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/select/select-interval-or-site?type=${this.fillForm.projectType}&projectId=${this.fillForm.project.id}`
					});
				} else if (type === 3) {
					if (!this.fillForm.project) {
						uni.showToast({
							title: "请选择项目",
							icon: "none"
						});
						return;
					}
					if (this.fillForm.watchmanUserName) {
						uni.setStorageSync("_temp_select_supervisor", this.fillForm.watchmanUserName);
					}
					const orgId = this.fillForm.projectType === 1 ? this.fillForm.project.unitId : this.fillForm.project
						.orgId;
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/select/select-supervisor?orgId=${orgId}&personType=jkzb&type=${this.fillForm.projectType}`
					});
				} else if (type === 4) {
					if (!this.fillForm.project) {
						uni.showToast({
							title: "请选择项目",
							icon: "none"
						});
						return;
					}
					if (this.fillForm.onSiteShiftLeaderName) {
						uni.setStorageSync("_temp_select_onSiteShiftLeaderName", this.fillForm.onSiteShiftLeaderName);
					}
					const orgId = this.fillForm.projectType === 1 ? this.fillForm.project.unitId : this.fillForm.project
						.orgId;
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/select/select-supervisor?orgId=${orgId}&personType=xcdb&type=${this.fillForm.projectType}`
					});
				} else if (type === 5) {
					if (!this.fillForm.project) {
						uni.showToast({
							title: "请选择项目",
							icon: "none"
						});
						return;
					}
					if (this.fillForm.personnelCalls) {
						uni.setStorageSync("_temp_select_special_work_personnel", this.fillForm.personnelCalls);
					}
					const orgId = this.fillForm.projectType === 1 ? this.fillForm.project.unitId : this.fillForm.project
						.orgId;
					uni.navigateTo({
						url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/select/select-special-work-personnel?orgId=${orgId}`
					});
				}
			},

			/** 保存每日交底填报的内容 */
			handleSaveFilleport() {
				return new Promise(resolve => {
					const {
						id,
						project,
						intervalSite,
						labour,
						personnelCalls,
						watchmanUserName,
						onSiteShiftLeaderName,
						constructionStartTime,
						constructionEndTime,
						projectType
					} = this.fillForm
					let tempXc = onSiteShiftLeaderName.map(it => ({
						relationType: "xcdb",
						personId: it.id,
						personName: `${it.name}(${it.phone ? it.phone : '' })`,
					}))
					const resq = {
						code: projectType === 1 ? "gcwb" : "zhdx",
						id,
						projectManagementId: project.id,
						pmName: project.name,
						watchmanId:watchmanUserName.id,
						watchmanUserName:`${watchmanUserName.name}(${watchmanUserName.phone ? watchmanUserName.phone : '' })`,
						constructionStartTime,
						constructionEndTime,
						onSiteShiftLeaderId: onSiteShiftLeaderName.id,
						// onSiteShiftLeaderName:`${onSiteShiftLeaderName.name}(${onSiteShiftLeaderName.phone ? onSiteShiftLeaderName.phone : '' })`,
						labour: parseInt(labour),
						planConstructionSiteSectionList: intervalSite.map(item => ({
							constructionMethod:projectType == 1 ? undefined : this.construction_method,
							lineId: item.lineId,
							lineName: item.lineName,
							lineSiteSectionId: item.lineSiteSectionId,
							lineSiteSectionName: item.lineSiteSectionName,
							lineSiteSectionType: item.lineSiteSectionType,
						})),
						personnelCalls: personnelCalls.map(item => ({
							relationType: "tsgz",
							personId: item.id,
							personName: item.name,
						})).concat(tempXc),
						plannedConstructionWorkloads:projectType == 1 ? undefined : this.plannedConstructionWorkloads

					}
					// console.log('入参', resq)
					// return
					constructionPlan_save(resq).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration:1000,
						});
						this.initFillForm();
						if(this.isShowTab) {
							setTimeout(() => {
								uni.navigateTo({
									url:`/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/index`
								})
							}, 1100)
						}
						resolve();
					});
				});
			},
			verifyNumberTable() {
				this.plannedConstructionWorkloads = this.plannedConstructionWorkloads.filter(item => item.name || item.tunnelRingNumber)
				if (!this.plannedConstructionWorkloads.length) {
					this.$message('请添加施工孔号及隧道环号！')
					return false
				} else if(this.plannedConstructionWorkloads.length > 2) {
					return this.$message('最多仅能增加两条数据！')
				}else {
					const array1 = this.plannedConstructionWorkloads.map(item => item.name)
					const array2 = this.plannedConstructionWorkloads.map(item => item.tunnelRingNumber)
					const filterArray1 = array1.filter(item => item)
					const filterArray2 = array2.filter(item => item)
					if (array1.length !== filterArray1.length || array2.length !== filterArray2.length) {
						this.$message('请将施工孔号及隧道环号表格填写完整！')
						return false
					} else {
						const set1 = new Set(filterArray1)
						const set2 = new Set(filterArray2)
						if (filterArray1.length !== set1.size || filterArray2.length !== set2.size) {
							this.$message('施工孔号或隧道环号重复！')
							return false
						}
					}
				}
				return true
			},
			/** 点击提交按钮 */
			async clickSubmit() {
				// 表单校验...
				if (!getFormCheckResult(this.fillForm, ['projectType','id','personnelCalls'])) {
					uni.showToast({
						title: "请检查表单是否填写完整",
						icon: "none"
					});
					return;
				} else if (!isPositiveInteger(this.fillForm.labour)) {
					uni.showToast({
						title: "劳务人员必须大于等于0的整数",
						icon: "none"
					});
					return;
				}
				if (!compareDate(this.fillForm.constructionEndTime, this.fillForm.constructionStartTime)) {
					uni.showToast({
						title: "施工结束时间不可早于施工开始时间！",
						icon: "none"
					});
					return;
				}
				if (['snwrd', 'swwrd'].includes(this.construction_method)) {
					if(!this.construction_method) {
						return this.$message('请选择施工功法！')
					}
					if (!this.verifyNumberTable()) {
						return
					}
				}
				
				// 调用接口...
				if (!this.isLoading) {
					this.isLoading = true;
					await this.handleSaveFilleport();
					// this.$emit("refreshFillRecordNotUploadCount");
					this.isLoading = false;
				}
			},

			/** 初始化表单 */
			initFillForm() {
				this.$set(this.fillForm, 'project', null)
				this.$set(this.fillForm, 'intervalSite', [])
				this.$set(this.fillForm, 'watchmanUserName', {})
				this.$set(this.fillForm, 'onSiteShiftLeaderName', [])
				this.$set(this.fillForm, 'labour', '')
				this.$set(this.fillForm, 'personnelCalls', [])
				this.$set(this.fillForm, 'constructionStartTime', '')
				this.$set(this.fillForm, 'constructionEndTime', '')
				this.construction_method = ''
				this.plannedConstructionWorkloads = []
			},
			confirmBuildStartDate(event) {
				console.log(event, '开始时间')
				this.fillForm.constructionStartTime = handleFormatDate(event.value, 3)
				this.buildStartDatePicker = false;
			},
			confirmBuildEndDate(event) {
				console.log(event, '施工时间')
				this.fillForm.constructionEndTime = handleFormatDate(event.value, 3)
				this.buildEndDatePicker = false;
			},

			/** 日期选择格式化 */
			dateFormatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				} else if (type === 'month') {
					return `${value}月`
				} else if (type === 'day') {
					return `${value}日`
				} else if (type === 'hour') {
					return `${value}时`
				} else if (type === 'minute') {
					return `${value}分`
				}
				return value;
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-report {
		.form {
			background: #fff;
			padding-top: 26upx;

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 44upx;
					flex-shrink: 0;
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 302upx;
				}
				.form-button {
					width: 96rpx;
					height: 60rpx;
					background: #2F80ED;
					border-radius: 8rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}

			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}


	}

	.fill-report.mar-t {
		padding-top: 26upx;
	}

	.footer-button {
		height: 154upx;

		.button-placeholder {
			height: 100%;
		}

		.button-group {
			height: 154upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			width: 100vw;
			bottom: 0;
			z-index: 1;

			.button-primary {
				background: #2f80ed;
				border-radius: 4upx;
				color: #fff;
				font-weight: bold;
				line-height: 92upx;
				text-align: center;
			}
		}
	}

	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}
</style>